<template>
    <view class="box">
        <view class="message-list-1">
            <view class="message-list">
                <view class="message-icon">
                    <image :src="`${picUrl}/message/1.png`"></image>
                    <view class="message-num"></view>
                </view>
                <view class="message-name">
                    <view class="message-type">公告消息</view>
                    <view class="message-text">请完成实名认证，体验更多服务</view>
                </view>
            </view>
            <view style="height: 10rpx;background-color: #F7F7F7;"></view>
        </view>
        <view class="message-list-1">
            <view class="message-list">
                <view class="message-icon">
                    <image :src="`${picUrl}/message/2.png`"></image>
                </view>
                <view class="message-name">
                    <view class="message-type">平台消息</view>
                    <view class="message-text">请完成实名认证，体验更多服务</view>
                </view>
            </view>
            <view style="height: 10rpx;background-color: #F7F7F7;"></view>
        </view>
        <view class="message-list-1">
            <view class="message-list">
                <view class="message-icon">
                    <image :src="`${picUrl}/message/3.png`"></image>
                </view>
                <view class="message-name">
                    <view class="message-type">系统消息</view>
                    <view class="message-text">请完成实名认证，体验更多服务</view>
                </view>
            </view>
            <view style="height: 10rpx;background-color: #F7F7F7;"></view>
        </view>
        <view class="message-list-1" v-for="(item,index) in 5" :key="index">
            <view class="message-list">
                <view class="message-icon">
                    <image :src="`${picUrl}s/message/5.png`"></image>
                    <view class="message-num2">5</view>
                </view>
                <view class="message-name">
                    <view class="message-type">张依依</view>
                    <view class="message-text">请完成实名认证，体验更多服务</view>
                </view>
            </view>
            <view style="height: 10rpx;background-color: #F7F7F7;"></view>
        </view>
    </view>
</template>

<script>
</script>

<style lang="scss" scoped>
    page{
        background-color: #FFF;
    }
    .box{
        .message-list{
            padding: 20rpx 30rpx;
            display: flex;
            align-items: center;
            .message-icon{
                width: 80rpx;
                height: 80rpx;
                position: relative;
                .message-num{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 20rpx;
                    height: 20rpx;
                    background: #FF0000;
                    opacity: 1;
                    border-radius: 50%;
                }
                .message-num2{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 30rpx;
                    height: 30rpx;
                    background: #FF0000;
                    opacity: 1;
                    border-radius: 50%;
                    
                    font-size: 20rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                image{
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }
            }
        }
        .message-name{
            margin-left: 30rpx;
            .message-type{
                font-size: 32rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #323232;
            }
            .message-text{
               font-family: PingFang SC-Regular, PingFang SC;
               font-weight: 400;
               color: #646464; 
            }
        }
    }
</style>